<template>
  <div>
    <div class="Mask" v-if="maskFlag"
      @click="$refs.MvVideo.pause();$emit('maskFlagFn',false)">
      <!-- mv播放 -->
      <div class="MvBox" @click.stop>
        <div class='Preload' style="">
          视频加载中</div>
        <video ref="MvVideo" controls='true' class="Video">
          <source :src='mvUrl' type='video/webm; codecs="vp8.0, vorbis"'>
          <source :src='mvUrl' type='video/ogg; codecs="theora, vorbis"'>
          <source :src='mvUrl'
            type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
          您的浏览器不支持 video 标签。
        </video>
      </div>
      <div class="sc" @click.stop="sc">收藏MV</div>
    </div>

  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
    };
  },

  methods: {
    mvPlay () {
      setTimeout(() => {
        this.$refs.MvVideo.play()
      }, 50)
    },
    sc () {
      let local = JSON.parse(localStorage.getItem('UserInfoList'))['MV']
      if (Boolean(local.find((val2) => val2.id == this.MVval.id))) {
        return this.ErrorAlert('已收藏过')
      }
      this.$store.dispatch('Change', ['MV', {
        id: this.MVval.id,
        title: this.MVval.name,
        art: this.MVval.artists
      }])
      this.ErrorAlert('收藏歌单成功', 'success')
      console.log(this.MVval);
    },
    ErrorAlert (mes, ty = 'error') {
      // 错误提示
      return this.$message({
        message: mes,
        duration: 700,
        type: ty
      });
    },
  },
  components: {},

  props: { maskFlag: { type: Boolean, default: false }, mvUrl: { type: String }, MVval: { default: null } },

  watch: {},

  computed: {},

}

</script>
<style scoped>
.Mask {
  z-index: 3;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.MvBox {
  position: absolute;
  top: 125px;
  left: 240px;
  width: 1080px;
  height: 500px;
}
.Preload {
  color: white;
  font-size: 40px;
  position: absolute;
  top: 200px;
  left: 410px;
}
.Video {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.sc {
  cursor: pointer;
  width: 200px;
  height: 50px;
  border-radius: 25px;
  border: 1px solid #000;
  background-color: black;
  position: absolute;
  bottom: 10px;
  left: 700px;
  color: white;
  font-size: 30px;
  line-height: 50px;
}
.sc:hover {
  color: red;
}
</style>